<template>
	<view class="progress-box" v-if="progressInfo.user_activity_id">
		<!-- 头像 -->
		<view class="progress-avater" v-if="!helpMoneyOptions.id">
			<block >
				<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<image v-else src="/static/img/default_avater.png" mode="aspectFill"></image>
			</block>
			<text>{{userInfo.phone || userInfo.username}}</text>
		</view>
		<view class="progress-avater user-progress" v-else>
			<text>好友进度:</text>
			<view class="user-swiatch-btn themeBg" @click="$emit('viewMy')">查看我的</view>
		</view>
		<!-- 进度条 -->
		<view class="progress-line-status">
			<view class="progress-status-box">
				<!-- 底部进度条 -->
				<view class="progress-line"></view>
				<!-- 当前进度条 -->
				<view class="progress-line-now">
					<view class="themeBg" :style="{width:`${progressInfo.process_val}%`}"></view>
				</view>
				<!-- 进度条单位 -->
				<view class="progress-line-uni">
					<view class="line-uni" v-for="item in 6" :key="item">
						<view class="uni-text">{{item*20}}%</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 邀请好友按钮 -->
		<block v-if="!activeStatus || activeStatus ==2">
			<button class="progress-share-btn disable-btn" disabled="true" v-if="activeStatus == 2">
				活动暂未开始
			</button>
			<button class="progress-share-btn disable-btn" disabled="true" v-if="!activeStatus">
				活动已结束
			</button>
		</block>
		<block v-if="activeStatus && !helpMoneyOptions.id">
			<view class="progress-share-btn" v-if="activeStatus==1 && (!progressInfo.process_val*1 < 100)" @click="$emit('showShare')">
				立即积福
			</view>
		</block>
		<view class="progress-share-btn" @tap="$com.alert('活动进度已完成！')" v-if="activeStatus==1 && (progressInfo.process_val*1 >= 100)">
			活动已完成
		</view>
		<block v-if="activeStatus && helpMoneyOptions.id">
			<block v-if="activeStatus==1 && (progressInfo.process_val*1 < 100)">
				<button class="progress-share-btn" :class="progressInfo.is_bargain ==1 ?'disable-btn':''" @click="progressInfo.is_bargain ==1 ?'':$emit('helpCutMoney')">
					{{progressInfo.is_bargain ==1 ? '已助力积福':'点击帮忙积福'}}
				</button>
			</block>
		</block>
		<!-- 参与用户 -->
		<view class="progress-user-list" v-if="progressInfo.details.length">
			<block v-if="progressInfo.task_data">
				<view class="progress-user-item" v-for="(item,index) in progressInfo.task_data" :key="index">
					<view class="user-item-img">
						<block v-if="progressInfo.details && progressInfo.details[index] && progressInfo.details[index].avatar">
							<image :src="progressInfo.details[index].avatar" mode="aspectFill"></image>
						</block>
						<image v-else src="/static/img/default_avater.png" mode="aspectFill"></image>
					</view>
						<view class="user-item-money themeBg">积{{item}}%</view>
				</view>
			</block>
			<view v-else style="text-align: center;width: 100%;padding: 30rpx 0;">
				暂无邀请额度
			</view>
		</view>
	</view>
	<view class="progress-box" v-else>
		<loadMore state="loading"/>
	</view>
</template>

<script>
	export default {
		data(){
			return {}
		},
		props:{
			progressInfo:{
				type:Object,
				default:()=>({})
			},
			userInfo:{
				type:Object,
				default:()=>({})
			},
			activeStatus:{
				type:Number,
				default:1
			},
			helpMoneyOptions:{
				type:Object,
				default:()=>({id:'',user_activity_id:''})
			}
		}
	}
</script>

<style>
	.progress-box{width: 100%;background-color: white;border-radius: 20rpx;}
	.progress-avater{margin: 0 auto;padding: 20rpx 0 40rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;}
	.progress-avater image{width: 100rpx;height: 100rpx;margin-bottom: 20rpx;border-radius: 50%;}
	.user-progress{font-weight: bold;font-size: 40rpx;position: relative;}
	.user-swiatch-btn{position: absolute;top: 20rpx;right: 0;;height: 60rpx; line-height: 60rpx ;font-size: 32rpx;color: white;padding: 0 20rpx;border-radius: 40rpx 0 0 40rpx;}
	
	.progress-line-status{height: 60rpx;padding: 0 40rpx 80rpx;}
	.progress-status-box{width: 100%;height: 100%;position: relative;}
	.progress-line,.progress-line-now {height: 100%;border-radius: 80rpx;background-color: #f2f2f2;overflow: hidden;}
	.progress-line-now {position: absolute;top:0;left: 0;height: 100%;width: 100%;}
	.progress-line-now>view{height: 100%;}
	.progress-line-uni{width: 100%;height: 100%;display: flex;justify-content: space-between;align-items:center;position: absolute;top:0;left: 0;}
	.line-uni {height: 50%;width:2px;background-color: #bbbbbb;position: relative;}
	.line-uni:first-child,.line-uni:last-child{background-color: transparent;}
	.uni-text{position: absolute;bottom: -20rpx;left: 50%;transform: translate(-50%,100%);font-size: 28rpx}
	.progress-share-btn {width: 400rpx;height:80rpx;margin: 0 auto 40rpx;line-height: 80rpx;text-align: center;border-radius: 80rpx;background: linear-gradient(45deg,#790001,#e5392a);color: white;}
	.disable-btn{background: #bbb;color: white;}
	/* 抽奖用户 */
	.progress-user-list{padding: 0 30rpx;display: flex;flex-wrap: wrap;}
	.progress-user-item{width: 20%;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-bottom: 40rpx;}
	.user-item-img {width: 80rpx;height: 80rpx;margin-bottom: 20rpx;}
	.user-item-img image {width: 100%;height: 100%;border-radius: 50%;}
	.user-item-money{padding: 4rpx 20rpx;border-radius: 40rpx;color: white;font-size: 28rpx}
</style>